<template>
    <div class="draggable">
        <div class="drag">
            <div>组件库</div>
            <draggable v-model="arr" :group="groupA" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                chosenClass="chosenClass" @start="onStart" @end="Onend" @add="OnAdd" :move="onMove" :sort="false">
                <transition-group style="display: flex;flex-wrap: wrap;">
                    <div class="item" style="width:40%;" v-for="(element, i) in arr" :key="i">
                        <el-button style="width:100%;text-align: left;" :icon="element.icon">{{ element.name }}</el-button>
                    </div>
                </transition-group>
                <!-- <transition-group>
                    <div class="item" v-for="(element, i) in arr" :key="i">{{ element.name }}</div>
                </transition-group> -->
            </draggable>
        </div>
        <div class="gable">
            <div style="position: fixed;text-align: center;">表单</div>
            <draggable v-model="arr2" :group="groupB" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                chosenClass="chosenClass" :scroll="true">
                <transition-group :style="style">
                    <div class="item" v-for="(item, index) in arr2" :key="index" @click="selestion(item, index)"
                        :class="act == index ? 'actitem' : ''">
                        <div v-if="item.type == 'input'" style="display: flex;align-items: center;">
                            <div style="min-width:10%;">{{ item.name }}</div>
                            <div style="width:90%;">
                                <el-input v-model="item.value" placeholder="请输入" style="width: 100%;"
                                    :size="FormSettings.sizer"></el-input>
                            </div>
                        </div>
                        <div v-if="item.type == 'textarea'" style="display: flex;align-items: center;">
                            <div style="min-width:10%;">{{ item.name }}</div>
                            <div style="width:90%;">
                                <el-input type="textarea" placeholder="请输入内容" v-model="item.value"
                                    :maxlength="item.maxlength" :rows="item.row" style="width: 100%;" show-word-limit
                                    :size="FormSettings.sizer"></el-input>
                            </div>
                        </div>
                        <div v-if="item.type == 'number'" style="display: flex;align-items: center;">
                            <div style="min-width:10%;">{{ item.name }}</div>
                            <div style="width:90%;">
                                <el-input v-model="item.value" :type="item.type" placeholder="请输入" style="width: 100%;"
                                    :size="FormSettings.sizer"></el-input>
                            </div>
                        </div>
                        <div v-if="item.type == 'select'" style="display: flex;align-items: center;">
                            <div style="min-width:10%;">{{ item.name }}</div>
                            <div style="width:90%;">
                                <el-select v-model="item.value" placeholder="请选择" style="width: 100%;"
                                    :size="FormSettings.sizer">
                                    <el-option v-for="(items, i) in item.option" :key="i" :label="items.label"
                                        :value="items.value"></el-option>
                                </el-select>
                            </div>
                        </div>
                        <div v-if="item.type == 'radio'" style="display: flex;align-items: center;">
                            <div style="min-width:10%;">{{ item.name }}</div>
                            <div style="width:90%;">
                                <el-radio-group v-model="item.value" :size="FormSettings.sizer">
                                    <el-radio v-for="(items, i) in item.option" :key="i" :label="items.value">{{ items.label
                                    }}</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                        <div v-if="item.type == 'check'" style="display: flex;align-items: center;">
                            <div style="min-width:10%;">{{ item.name }}</div>
                            <div style="width:90%;">
                                <el-checkbox-group v-model="item.value" :size="FormSettings.sizer">
                                    <el-checkbox v-for="(items, i) in item.option" :key="i" :label="items.value">{{
                                        items.label
                                    }}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                        <div v-if="item.type == 'time'" style="display: flex;align-items: center;">
                            <div style="min-width:10%;">{{ item.name }}</div>
                            <div style="width:90%;">
                                <el-time-select v-model="item.value" :value-format="item.vformat" :format="item.format"
                                    placeholder="选择时间">
                                </el-time-select>
                            </div>
                        </div>
                        <div v-if="item.type == 'timerange'" style="display: flex;align-items: center;">
                            <div style="min-width:10%;">{{ item.name }}</div>
                            <div style="width:90%;">
                                <!-- <el-time-picker is-range v-model="item.value" range-separator="-" start-placeholder="开始时间"
                                    end-placeholder="结束时间" placeholder="选择时间范围">
                                </el-time-picker> -->
                                <el-time-picker is-range v-model="item.value" range-separator="至" start-placeholder="开始时间"
                                    end-placeholder="结束时间" placeholder="选择时间范围">
                                </el-time-picker>
                            </div>
                        </div>
                        <div v-if="item.type == 'date'" style="display: flex;align-items: center;">
                            <div style="min-width:10%;">{{ item.name }}</div>
                            <div style="width:90%;">
                                <el-date-picker v-model="item.value" type="date" placeholder="选择日期"
                                    :value-format="item.vformat" :format="item.format">
                                </el-date-picker>
                            </div>
                        </div>
                        <div v-if="item.type == 'daterange'" style="display: flex;align-items: center;">
                            <div style="min-width:10%;">{{ item.name }}</div>
                            <div style="width:90%;">
                                <el-date-picker v-model="item.value" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                                <!-- <el-date-picker v-model="item.value" type="date" placeholder="选择日期"
                                    :value-format="item.vformat" :format="item.format">
                                </el-date-picker> -->
                            </div>
                        </div>
                        <!-- 删除操作 -->
                        <div class="item_del" :style="act == index ? 'display:block' : 'display:none'" v-if="act != -1">
                            <el-button type="text" icon="el-icon-delete" style="color:#FFF;padding:5px 5px;"
                                @click="deltims(item, index)"></el-button>
                        </div>
                    </div>
                </transition-group>
            </draggable>
        </div>
        <div class="drags">
            <el-tabs v-model="activeName" style="font-weight: 700;">
                <!-- <el-tab-pane label="组件设置" name="first" v-if="act != -1"></el-tab-pane> -->
                <el-tab-pane label="组件设置" name="first"></el-tab-pane>
                <el-tab-pane label="表单设置" name="second"></el-tab-pane>
            </el-tabs>
            <!-- 组件设置 -->
            <div v-if="act != -1 && activeName == 'first'">
                <el-form :model="form" label-width="80px" style="margin-right:10px;">
                    <el-form-item label="唯一值:">
                        <el-input v-model="form.key" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="名称:">
                        <el-input v-model="form.name" placeholder="请输入" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="属性值:" v-if="form.type == 'select' || form.type == 'radio' || form.type == 'check'"
                        style="position: relative;">
                        <div style="position: absolute;left:-60px;top: 30px;">
                            <div v-for="(items, index) in form.option" :key="index" style="text-align: left;">
                                名字：<el-input v-model="items.label" style="width: 30%;" size="mini"></el-input>
                                值：<el-input v-model="items.value" style="width: 30%;" size="mini"></el-input>
                                <el-button icon="el-icon-minus" style="padding:10px;border-radius: 50%;"
                                    @click="getjian(items, index)" size="mini"></el-button>
                            </div>
                            <div style="text-align: left;">
                                <el-button type="text" style="padding:10px;border-radius: 50%;" @click="getjia"
                                    size="mini">增加选项</el-button>
                                <!-- <el-button icon="el-icon-plus" style="padding:10px;border-radius: 50%;" @click="getjia"
                                    size="mini"></el-button> -->
                            </div>
                        </div>
                    </el-form-item>
                    <template v-if="form.type == 'textarea'">
                        <el-form-item label="高度:">
                            <el-input v-model="form.row" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="最大字数:">
                            <el-input v-model="form.maxlength" size="mini"></el-input>
                        </el-form-item>
                    </template>

                </el-form>
            </div>
            <!-- 表单设置 -->
            <div v-if="activeName == 'second'">
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="基础功能" name="1">
                        <el-form :model="FormSettings" label-width="100px" style="text-align: left;">
                            <el-form-item label="组件大小">
                                <el-select size="small" v-model="FormSettings.sizer">
                                    <el-option v-for="(item, i) in sizeList" :key="i" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="标签位置">
                                <el-radio-group v-model="FormSettings.Labelposition" size="small">
                                    <el-radio-button label="left">左边</el-radio-button>
                                    <el-radio-button label="top">顶部</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="标签对齐">
                                <el-radio-group v-model="FormSettings.labeldirection" size="small">
                                    <el-radio-button label="left">居左</el-radio-button>
                                    <el-radio-button label="center">居中</el-radio-button>
                                    <el-radio-button label="right">居右</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="标签宽度">
                                <el-input-number v-model="FormSettings.labelWidth" :min="1" size="small"></el-input-number>
                            </el-form-item>
                        </el-form>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
    </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
    components: {
        draggable
    },
    data() {
        return {
            activeNames: ['1'],
            activeName: 'second',
            arr: [
                { id: 1, ve: 1, icon: 'el-icon-full-screen', name: '单行输入', type: 'input', value: '', key: '' },
                { id: 2, ve: 2, icon: 'el-icon-full-screen', name: '多行输入', type: 'textarea', value: '', key: '', row: 3, maxlength: 30, },
                { id: 3, ve: 3, icon: 'el-icon-full-screen', name: '计数器', type: 'number', value: 0, key: '' },
                {
                    id: 4, ve: 4, icon: 'el-icon-full-screen', name: '下拉选择', type: 'select', value: '', key: '', option: [
                        { label: '第一个', value: 1 },
                        { label: '第二个', value: 2 },
                        { label: '第三个', value: 3 }
                    ]
                },
                {
                    id: 5, ve: 5, icon: 'el-icon-full-screen', name: '单选项', type: 'radio', value: '', key: '', option: [
                        { label: 'one', value: 1 },
                        { label: 'two', value: 2 },
                        { label: 'three', value: 3 }
                    ]
                },
                {
                    id: 6, ve: 6, icon: 'el-icon-full-screen', name: '多选项', type: 'check', value: [], key: '', option: [
                        { label: 'one', value: 1 },
                        { label: 'two', value: 2 },
                        { label: 'three', value: 3 }
                    ]
                },
                {
                    id: 7, ve: 7, icon: 'el-icon-full-screen', name: '时间', type: 'time', value: '', key: '', vformat: 'HH:mm:ss', format: 'HH:mm:ss'
                },
                {
                    id: 8, ve: 8, icon: 'el-icon-full-screen', name: '时间范围', type: 'timerange', value: [], key: '', vformat: 'HH:mm:ss', format: 'HH:mm:ss'
                },
                {
                    id: 9, ve: 9, icon: 'el-icon-full-screen', name: '日期', type: 'date', value: '', key: '', vformat: 'yyyy-MM-dd', format: 'yyyy-MM-dd'
                },
                {
                    id: 10, ve: 10, icon: 'el-icon-full-screen', name: '日期范围', type: 'daterange', value: [], key: '', vformat: 'yyyy-MM-dd', format: 'yyyy-MM-dd'
                }
            ],
            arr2: [],
            sizeList: [
                { value: '', label: 'default' },
                { value: 'medium', label: 'medium' },
                { value: 'small', label: 'small' },
                { value: 'mini', label: 'mini' }
            ],
            FormSettings: {
                sizer: 'small',
                labelWidth: 100,
                Labelposition: 'left',
                labeldirection: 'left',
            },
            moveId: -1,
            act: -1,
            groupA: {
                name: "itxst",
                put: false, //可以拖入
                sort: false,
                pull: "clone"
                //pull: () => {
                //if (this.arr1.length <= 3) {
                //this.message = "元素小于等于3不允许再拖拽了";
                //}
                //return this.arr1.length > 3;
                //},
            },
            groupB: {
                name: "itxst1",
                pull: false,
                put: true
                // pull: "clone", //B组拖拽时克隆到A组
                // put: true,
            },
            //空数组之在的样式，设置了这个样式才能拖入
            // style: "min-height:120px;display: block;",
            style: "min-height:900px;display: block;margin-top:21px;padding-bottom:30px;",
            form: {
                key: '',
                name: '',
                option: ''
            },
        }
    },
    watch: {
        'form.key'(nval) {
            console.log(nval, "改变了");
            this.arr2.map(item => {
                if (item.id == this.form.id) {
                    item.key = this.form.key
                }
            })
            sessionStorage.setItem('VForm_drag', JSON.stringify(this.arr2))
        },
        'form.name'(nval) {
            console.log(nval, "改变了name");
            this.arr2.map(item => {
                if (item.id == this.form.id) {
                    item.name = this.form.name
                }
            })
            sessionStorage.setItem('VForm_drag', JSON.stringify(this.arr2))
        },
        'form.option'(nval) {
            console.log(nval, "option");
            this.arr2.map(item => {
                if (item.id == this.form.id) {
                    item.option = this.form.option
                }
            })
            sessionStorage.setItem('VForm_drag', JSON.stringify(this.arr2))
        },
        'form.row'(nval) {
            console.log(nval, "option");
            this.arr2.map(item => {
                if (item.id == this.form.id) {
                    item.row = this.form.row
                }
            })
            sessionStorage.setItem('VForm_drag', JSON.stringify(this.arr2))
        },
        'form.maxlength'(nval) {
            console.log(nval, "option");
            this.arr2.map(item => {
                if (item.id == this.form.id) {
                    item.maxlength = this.form.maxlength
                }
            })
            sessionStorage.setItem('VForm_drag', JSON.stringify(this.arr2))
        },


        // 改变表单
        'FormSettings.sizer'() {
            // this.FormSettings.sizer = nval;
            console.log("改变了表单大小");
            localStorage.setItem('VForm_settings', JSON.stringify(this.FormSettings))
            // sessionStorage.setItem('VForm_settings', JSON.stringify(this.FormSettings))
        }
    },
    created() {
        this.arr2 = JSON.parse(sessionStorage.getItem('VForm_drag'));
        // localStorage.setItem('VForm_settings', JSON.stringify(this.FormSettings))
        // sessionStorage.setItem('VForm_settings', JSON.stringify(this.FormSettings));
        if (this.arr2 == null) {
            this.arr2 = [];
        }
    },
    methods: {
        // 表单删除
        deltims(item, i) {
            this.arr2 = JSON.parse(sessionStorage.getItem('VForm_drag'));
            console.log(item, i, "shanchu");
            console.log(this.arr2, "shanchu");
            this.arr2.splice(i, 1);
            sessionStorage.setItem('VForm_drag', JSON.stringify(this.arr2))
        },
        getjia() {
            this.form.option.push({
                label: '新值', value: this.form.option.length + 1
            })
            // this.form.option.splice(index,1)
            this.arr2.map(item => {
                if (item.id == this.form.id) {
                    item.option = this.form.option
                }
            })
            sessionStorage.setItem('VForm_drag', JSON.stringify(this.arr2))
        },
        getjian(items, index) {
            this.form.option.splice(index, 1)
            this.arr2.map(item => {
                if (item.id == this.form.id) {
                    item.option = this.form.option
                }
            })
            sessionStorage.setItem('VForm_drag', JSON.stringify(this.arr2))
            // console.log(items,"1111");
            // this.form.option.split(items,1)
            // console.log(this.form,"2222");
        },
        selestion(item, index) {
            console.log(item, index, "选中");
            this.act = index;
            this.form = item;
            this.activeName = 'first';
            // this.form = {
            //     key:'',
            //     name:item.name,
            //     option:item.option
            // }
        },
        onStart(e) {
            console.log(e, "开始拖拽");
            console.log(this.arr2, "开始拖拽");
        },
        Onend(e) {
            console.log(e, "结束拖拽");
            console.log(this.arr2, "结束拖拽");
            this.arr2 = JSON.parse(JSON.stringify(this.arr2))
            this.arr2.map((item) => {
                if ((item.id + '').length < 2) {
                    setInterval(() => {
                        item.id = new Date().getTime();
                    }, 100);
                }
            })
            console.log(this.arr2, "结束拖拽");
            sessionStorage.setItem('VForm_drag', JSON.stringify(this.arr2))
        },
        OnAdd(e) {
            console.log(e, "触发了");
            console.log(this.arr2, "触发了");
        },
        // 回调
        onMove(e) {
            console.log(e, "回调");
            console.log(this.arr2, "呦");
            // this.arr2.push(JSON.parse(JSON.stringify(e.draggedContext.element)))
            this.moveId = e.draggedContext.element.id;
            // if (e.draggedContext.element.ve == 1) return false;
            // if (e.relatedContext.element.id == 2) return false;
            // if (e.relatedContext.element.id == 3) return false;
            // if (e.relatedContext.element.id == 4) return false;
            // if (e.relatedContext.element.id == 5) return false;
            // if (e.relatedContext.element.id == 6) return false;
            return true;
        }
    }
}
</script>
<style lang="scss" scoped>
.actitem {
    border: 1px solid #1586fa !important;
    border-radius: 4px !important;
}

.draggable {
    height: 100%;
    // border: 1px solid pink;
    display: flex;
    box-sizing: border-box;

    .drag {
        width: 300px;
        height: 100%;
        background-color: #FFFFFF;
        // height: 740px;
        // overflow-y: auto;

        .dragClass {
            background-color: blue !important;
        }

        .chosenClass {
            background-color: red !important;
            opacity: 1 !important;
        }

        .dragClass {
            background-color: blueviolet !important;
            opacity: 1 !important;
            box-shadow: none !important;
            outline: none !important;
            background-image: none !important;
        }

        .item {
            margin: 5px 10px;
            // padding: 10px 0;
            // border: 1px solid pink;
        }
    }

    .gable {
        width: calc(100% - 620px);
        background-color: #FFFFFF;
        // border-left: 1px solid;
        // border-right: 1px solid;
        // padding-bottom: 30px;
        height: 100%;
        margin: 0 10px;
        // height: 710px;
        overflow-y: auto;

        .item {
            box-sizing: border-box;
            margin: 20px 20px;
            padding: 5px 0;
            // border: 1px dashed #999999;
            text-align: left;
            position: relative;

            .item_del {
                position: absolute;
                right: 0;
                bottom: 0;
                height: 24px;
                width: 60px;
                background-color: #409eff;
                text-align: right;
                // opacity: 0.5;
            }
        }
    }

    .drags {
        width: 300px;
        background-color: #FFFFFF;
    }
}

::v-deep .el-collapse-item__header {
    font-weight: 700;
    text-indent: 10px;
}
</style>